<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul id="box">
    <!-- <li><span>名称</span>-------- <span>价格</span> </li> -->
  </ul>
  <button id="btn">加载商品</button>
  <script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
      // 1创建对象
      var xhr = new XMLHttpRequest();
      //2.调用open()
      xhr.open("get", "./kk.json", true);
      //3.调用send 
      xhr.send()
      //4.等待数据返回 并渲染
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          var arr = JSON.parse(xhr.responseText) //arr是ajax 获取的后端数据
          console.log(arr);
          loadList(arr)
        }
      }
      // 加载数据
      function loadList(arr) {
        var box = document.getElementById("box");
        var str = ``;
        for (var i = 0; i < arr.length; i++) {
          str += ` <li><span>${arr[i].pname}</span>-------- <span>${arr[i].price}</span> </li>`
        }
        box.innerHTML = str;
      }
    }
  </script>

</body>

</html>